<!-- Page header -->
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <h2 class="page-title">
                    用户中心
                </h2>
            </div>
        </div>
    </div>
</div>
<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
        <div class="card">
            <div class="row g-0">
                <div class="col-3 d-none d-md-block border-end">
                    <div class="card-body">
                        <div class="list-group list-group-transparent">
                            <a href="javascript:void(0);"
                               class="list-group-item list-group-item-action d-flex align-items-center active" onclick="showSection('account')">我的账户</a>
                            <a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center" onclick="showSection('favorites')">我的收藏</a>
                            <!-- 保留其他注释的导航项 -->
                            <!-- 保留其他注释的导航项 -->
                            <!-- <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">修改密码</a>
                                    <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">个人简介</a> -->
                        </div>
                    </div>
                </div>
                <div class="col d-flex flex-column">
                    <div id="account-section" class="card-body">
                        <h2 id="settings_nickname" class="mb-4">铭哥</h2>
                        <input type="text" style="display: none;" id="settings_user_id">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <a id="settings_avatar" class="avatar avatar-xl"
                                   style="background-image: url(./image/avatar02.jpeg)"
                                   onclick="openFileDialog()"></a>
                                <!-- 文件选择 -->
                                <input type="file" class="form-control" style="position:absolute;left:-9999px;"
                                       id="settings_input_chooiceAvatar" onchange="handleAvatarUpload()">
                            </div>

                            <div class="col-auto"><a href="javascript:void(0);" class="btn" onclick="openFileDialog()">
                                修改头像
                            </a>

                            </div>
                        </div>

                        <h3 class="card-title mt-4">昵称</h3>
                        <div class="row">
                            <div class="col-9">
                                <input id="setting_input_nickname" type="text" class="form-control">
                                <div class="invalid-feedback">昵称不能为空</div>
                            </div>
                            <div class="col-3">
                                <a id="setting_submit_nickname" href="javascript:void(0)" class="btn">
                                    修 改
                                </a>
                            </div>
                        </div>
                        <hr>
                        <h3 class="card-title mt-4">邮箱地址</h3>
                        <div>
                            <div class="row g-3">
                                <div class="col-9">
                                    <input id="setting_input_email" type="text" class="form-control">
                                    <div class="invalid-feedback">邮箱地址不能为空</div>
                                </div>
                                <div class="col-3">
                                    <a id="setting_submit_email" href="javascript:void(0)" class="btn">
                                        修 改
                                    </a>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <h3 class="card-title mt-4">电话号码</h3>
                        <div>
                            <div class="row g-3">
                                <div class="col-9">
                                    <input id="setting_input_phoneNum" type="text" class="form-control">
                                    <div class="invalid-feedback">电话号码不能为空</div>
                                </div>
                                <div class="col-3">
                                    <a id="setting_submit_phoneNum" href="javascript:void(0);" class="btn">
                                        修 改
                                    </a>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <h3 class="card-title mt-4">修改密码</h3>
                        <div>
                            <div class="row g-3">
                                <!-- 表单 -->
                                <div class="col-9">
                                    <form autocomplete="off" novalidate>
                                        <div class="mb-2">
                                            <label class="form-label required">
                                                原密码
                                            </label>
                                            <div class="input-group input-group-flat">
                                                <input id="settings_input_oldPassword" type="password"
                                                       class="form-control" placeholder="请输入密码" autocomplete="off">
                                                <span class="input-group-text">
                          <a href="#" class="link-secondary" title="显示密码"
                             data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                 viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                 stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                              <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/>
                              <path
                                      d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"/>
                            </svg>
                          </a>
                        </span>
                                                <div class="invalid-feedback">原密码不能为空</div>
                                            </div>
                                        </div>

                                        <div class="mb-2">
                                            <label class="form-label required">
                                                新原密码
                                            </label>
                                            <div class="input-group input-group-flat">
                                                <input id="settings_input_newPassword" type="password"
                                                       class="form-control" placeholder="请输入密码" autocomplete="off">
                                                <span class="input-group-text">
                          <a href="#" class="link-secondary" title="显示密码"
                             data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                 viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                 stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                              <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/>
                              <path
                                      d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"/>
                            </svg>
                          </a>
                        </span>
                                                <div class="invalid-feedback">新密码不能为空</div>
                                            </div>
                                        </div>
                                        <div class="mb-2">
                                            <label class="form-label required">
                                                确认密码
                                            </label>
                                            <div class="input-group input-group-flat">
                                                <input id="settings_input_passwordRepeat" type="password"
                                                       class="form-control" placeholder="请输入密码" autocomplete="off">
                                                <span class="input-group-text">
                          <a href="#" class="link-secondary" title="显示密码"
                             data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                 viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                 stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                              <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/>
                              <path
                                      d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"/>
                            </svg>
                          </a>
                        </span>
                                                <div class="invalid-feedback">确认密码不能为空</div>
                                            </div>
                                        </div>

                                        <div class="form-footer">
                                            <button id="settings_submit_password" type="button"
                                                    class="btn btn-outline-danger w-100">提交修改
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <h3 class="card-title mt-4">个人简介</h3>
                        <div class="row">
                            <div class="col-9">
                <textarea id="settings_textarea_remark" class="form-control"
                          placeholder="写点自我介绍，可以让朋友们了解你..."
                          rows="5"></textarea>
                                <div class="invalid-feedback">个人简介不能为空</div>
                            </div>
                            <div class="col-3">
                                <a href="javascript:void(0);" class="btn" id="settings_submit_remark">
                                    修 改
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 新增收藏列表模块 -->
                    <div id="favorites-section" class="card-body" style="display: none;">
                        <h2 class="mb-4">我的收藏</h2>
                        <div class="mb-3">
                            <button id="refresh-favorites" class="btn" onclick="loadFavorites()">
                                刷新收藏列表
                            </button>
                        </div>

                        <!-- 收藏列表加载状态 -->
                        <div id="favorites-loading" style="display: none; text-align: center; padding: 20px;">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-2">正在加载收藏列表...</p>
                        </div>

                        <!-- 收藏列表为空状态 -->
                        <div id="favorites-empty" style="display: none; text-align: center; padding: 40px;">
                            <p>暂无收藏内容</p>
                            <a href="#" class="btn mt-2">去浏览内容</a>
                        </div>

                        <!-- 收藏列表表格 -->
                        <div id="favorites-table-container">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>标题</th>
                                    <th>收藏时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="favorites-list">
                                <!-- 收藏列表数据将通过JS动态填充 -->
                                </tbody>
                            </table>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function() {
      // ================= 获取用户详情，初始化页面内容 =================
      // 发送AJAX请求，成功时 调用initUserInfo方法，完成页面数据初始化
      console.log('获取个人信息');
      $.ajax({
        type : 'get',
        url : 'user/info',
        // 回调
        success : function (respData) {
          if (respData.code == 0) {
            // 成功
            console.log('初始化个人信息：' + respData.data);
            initUserInfo(respData.data);
          } else {
            // 提示信息
            $.toast({
                  heading: '警告',
                  text: respData.message,
                  icon: 'warning'
              });
            }
          },
          error : function () {
            // 提示信息
            $.toast({
                heading: '错误',
                text: '访问出现问题，请与管理员联系.',
                icon: 'error'
            });
          }
      });
    });

    // ================= 设置用户信息 =================
    function initUserInfo(user) {
      if (!user) {
        console.warn('user 参数为无效值，无法初始化用户信息');
        return;
       }
      // 默认头像路径
      if (!user.avatarUrl) {
        user.avatarUrl = avatarUrl;
      }
      // 用户Id
      $('#settings_user_id').val(user.id);
      // title 昵称
      $('#settings_nickname').html(user.nickname);
      // 头像
      $('#settings_avatar').css('background-image', 'url(' + user.avatarUrl + ')');
      // 昵称
      $('#setting_input_nickname').val(user.nickname);
      // 邮箱
      $('#setting_input_email').val(user.email);
      // 电话
      $('#setting_input_phoneNum').val(user.phoneNum);
      // 个人简历
      $('#settings_textarea_remark').html(user.remark);
    }

    // ================= 封装ajax请求 =================
    function changeUserInfo(userInfo, type) {
      // 校验用户信息
      if (!userInfo) {
        $.toast({
          heading: '提示',
          text: '请检查要修改的内容是否正确或联系管理员',
          icon: 'info'
        });
        return;
      }

      // 定义接口路径
      let userURL = 'user/modifyInfo';
      if (type == 1) {
        userURL = 'user/modifyInfo';
      } else if (type == 2) {
        userURL = 'user/modifyPwd';
      }

      // 发送请求，提示响应结果
      $.ajax({
        type : 'post',
        url : userURL,
        contentType : 'application/x-www-form-urlencoded',
        data : userInfo,
        // 回调
        success : function (respData) {
          if (respData.code == 0) {
            // 获取用户对象
            let user = respData.data;

            // user对象有效，并且昵称有效 修改页面中的内容
            if (user && user.nickname) {
              // 个人中心页面中的昵称
              $('#settings_nickname').html(user.nickname);
              // 导航栏中的昵称
              $('#index_nav_nickname').html(user.nickname);
            }
            // 如查密码修改成功强制登录
            if (type == 2) {
              location.assign('sign-in.html');
              return;
            }
            // 提示信息
            $.toast({
                  heading: '成功',
                  text: respData.message,
                  icon: 'success'
              });
          } else {
            // 提示信息
            $.toast({
                  heading: '警告',
                  text: respData.message,
                  icon: 'warning'
              });
            }
          },
          error : function () {
            // 提示信息
            $.toast({
                heading: '错误',
                text: '访问出现问题，请与管理员联系.',
                icon: 'error'
            });
          }
      });

    }

    // ================= 处理头像上传 =================
    function handleAvatarUpload() {
      const fileInput = document.getElementById('settings_input_chooiceAvatar');
      const file = fileInput.files[0];

      console.log('头像上传');
      // 校验文件是否存在
      if (!file) {
        $.toast({
          heading: '提示',
          text: '请选择图片文件',
          icon: 'info'
        });
        return;
      }

      // 校验文件类型
      const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
      if (!allowedTypes.includes(file.type)) {
        $.toast({
          heading: '警告',
          text: '仅支持JPG、PNG、GIF格式的图片',
          icon: 'warning'
        });
        fileInput.value = ''; // 清空选择
        return;
      }

      // 校验文件大小（限制5MB）
      if (file.size > 5 * 1024 * 1024) {
        $.toast({
          heading: '警告',
          text: '图片大小不能超过5MB',
          icon: 'warning'
        });
        fileInput.value = '';
        return;
      }

      // 构造FormData
      const formData = new FormData();
      formData.append('userId', $('#settings_user_id').val());
      formData.append('avatarFile', file);

      // 发送上传请求
      $.ajax({
        type: 'post',
        url: 'user/uploadAvatar',
        data: formData,
        contentType: false, // 必须为false，否则SpringMVC无法解析文件
        processData: false, // 禁止jQuery处理数据
        success: function(respData) {
          if (respData.code === 0) {
            // 更新头像显示
            $('#settings_avatar').css('background-image', `url(${respData.data.avatarUrl})`);
            $.toast({
              heading: '成功',
              text: '头像上传成功',
              icon: 'success'
            });
          } else {
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error: function() {
          $.toast({
            heading: '错误',
            text: '头像上传失败，请联系管理员',
            icon: 'error'
          });
        }
      });

      // 清空文件选择框（允许重复选择同一张图片）
      fileInput.value = '';
    }

    // ================= 处理选择头像事件 =================
    function openFileDialog () {
      // 触发选择文件按钮的点击事件
      console.log('打开文件选择框');
      $('#settings_input_chooiceAvatar').click();
    }

    // ================= 修改用户昵称 =================
    $('#setting_submit_nickname').click(function(){
      // 获取值
      let nicknameEl = $('#setting_input_nickname');
      // 校验
      if(!nicknameEl.val()) {
        nicknameEl.focus();
        return false;
      }
      // 构造数据
      let nicknameObj = {
        id : $('#settings_user_id').val(),
        nickname : nicknameEl.val()
      }
      // 发送请求
      changeUserInfo(nicknameObj);
    });

    // ================= 修改邮箱 =================
    $('#setting_submit_email').click(function(){
      // 获取值
      let emailEl = $('#setting_input_email');
      console.log("昵称 ：" + emailEl.val());
      // 校验
      if(!emailEl.val()) {
        emailEl.focus();
        return false;
      }
      // 构造数据
      let emailObj = {
        id : $('#settings_user_id').val(),
        email : emailEl.val()
      }
      // 发送请求
      changeUserInfo(emailObj);
    });

    // ================= 修改电话 =================
    $('#setting_submit_phoneNum').click(function(){
      // 获取值
      let phoneNumEl = $('#setting_input_phoneNum');
      // 校验
      if(!phoneNumEl.val()) {
        phoneNumEl.focus();
        return false;
      }
      // 构造数据
      let phoneNumObj = {
        id : $('#settings_user_id').val(),
        phoneNum : phoneNumEl.val()
      }
      // 发送请求
      changeUserInfo(phoneNumObj);
    });


    // ================= 修改个人介绍 =================
    $('#settings_submit_remark').click(function(){
      // 获取值
      let remarkEl = $('#settings_textarea_remark');
      // 校验
      if(!remarkEl.val()) {
        remarkEl.focus();
        return false;
      }
      // 构造数据
      let remarkObj = {
        id : $('#settings_user_id').val(),
        remark : remarkEl.val()
      }
      // 发送请求
      changeUserInfo(remarkObj);
    });

    // ================= 修改密码 =================
    $('#settings_submit_password').click(function() {
      // 获取值
      let oldPasswordEl = $('#settings_input_oldPassword');
      // 校验
      if(!oldPasswordEl.val()) {
        oldPasswordEl.focus();
        return false;
      }
      // 获取值
      let newPasswordEl = $('#settings_input_newPassword');
      // 校验
      if(!newPasswordEl.val()) {
        newPasswordEl.focus();
        return false;
      }
      // 获取值
      let passwordRepeatEl = $('#settings_input_passwordRepeat');
      // 校验
      if(!passwordRepeatEl.val()) {
        passwordRepeatEl.focus();
        return false;
      }

      // 两次输入的密码是否相同
      if (newPasswordEl.val() != passwordRepeatEl.val()) {
        $.toast({
          heading: '提示',
          text: '两次输入的密码不相同',
          icon: 'warning'
        });
        // 获取焦点
        passwordRepeatEl.focus();
        return false;
      }

      // 构造数据
      let  passwrodObj = {
        oldPassword : oldPasswordEl.val(),
        newPassword : newPasswordEl.val(),
        passwordRepeat : passwordRepeatEl.val()

      }
      // 发送请求
      changeUserInfo(passwrodObj, 2);
      // 清空输入框
      oldPasswordEl.val('');
      newPasswordEl.val('');
      passwordRepeatEl.val('');
    });


    // 添加切换显示区域的函数
    function showSection(section) {
        // 隐藏所有区域
        document.getElementById('account-section').style.display = 'none';
        document.getElementById('favorites-section').style.display = 'none';

        // 移除所有导航项的active类
        document.querySelectorAll('.list-group-item').forEach(item => {
            item.classList.remove('active');
        });

        // 显示选中区域并激活对应导航项
        if (section === 'account') {
            document.getElementById('account-section').style.display = 'block';
            document.querySelectorAll('.list-group-item')[0].classList.add('active');
        } else if (section === 'favorites') {
            document.getElementById('favorites-section').style.display = 'block';
            document.querySelectorAll('.list-group-item')[1].classList.add('active');
            // 加载收藏数据
            loadFavorites();
        }
    }

    // 加载收藏列表数据
    function loadFavorites() {
        const listContainer = document.getElementById('favorites-list');
        const loading = document.getElementById('favorites-loading');
        const emptyState = document.getElementById('favorites-empty');

        // 显示加载状态
        listContainer.innerHTML = '';
        loading.style.display = 'block';
        emptyState.style.display = 'none';

        // 发送请求获取收藏列表
        $.ajax({
            type: 'get',
            url: 'user/favorites', // 后端提供的收藏列表接口
            success: function(respData) {
                loading.style.display = 'none';

                if (respData.code === 0) {
                    const favorites = respData.data || [];

                    if (favorites.length === 0) {
                        // 显示空状态
                        emptyState.style.display = 'block';
                        return;
                    }

                    // 填充列表数据
                    favorites.forEach(item => {
                        let row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${item.id}</td>
                            <td>
                                <a href="javascript:void(0);" class="collect_article_title">${item.title}</a>
                            </td>
                            <td>${formatDateTime(item.createTime)}</td>

                            <td>
                                <button class="btn btn-sm" onclick="cancelFavorite(${item.id})">
                                    取消收藏
                                </button>
                            </td>
                        `;
                        // 转为元素对象
                        let articleItem = $(row);
                        // 获取标题的 a 标签
                        let articleTitle = articleItem.find('.collect_article_title');
                        // 处理标题点击事件
                        articleTitle.click(function() {
                          // 通过全局变量保存当前访问的帖子信息
                          console.log('进入标题点击事件')
                          currentArticle = item;
                          removeNavActive();
                          $('#bit-forum-content').load('details.html');
                        });

                        listContainer.appendChild(row);
                    });
                } else {
                    $.toast({
                        heading: '警告',
                        text: respData.message || '获取收藏列表失败',
                        icon: 'warning'
                    });
                }
            },
            error: function() {
                loading.style.display = 'none';
                $.toast({
                    heading: '错误',
                    text: '获取收藏列表时发生错误，请稍后重试',
                    icon: 'error'
                });
            }
        });
    }
    // 格式化日期时间
    function formatDateTime(dateString) {
        if (!dateString) return '';
        const date = new Date(dateString);
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    }

    // 取消收藏
    function cancelFavorite(articleId) {
     const url = 'article/collect';
      $.ajax({
        type: 'post',
        url: url + '?id=' + articleId,
        success: function (respData) {
          if (respData.code == 0) {
            console.log('接受收藏数据 : ',respData.data);
            loadFavorites()
            $.toast({
              heading: '成功',
              text: '取消收藏成功',
              icon: 'success'
            });
          } else {
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error: function () {
          $.toast({
            heading: '错误',
            text: '访问出现问题，请与管理员联系.',
            icon: 'error'
          });
        }
      });
    }

</script>